<template>
  <view class="container">
    <scroll-view 
      class="scroll-container" 
      scroll-y 
      :show-scrollbar="false"
    >
      <view class="works-block" v-for="(item, index) in worksList" :key="index">
        <view class="block-content" :class="getBlockClass(index)">
          <template v-if="index === 0">
            <view class="art-text-content">
              <view class="text-section main">
                <text class="chinese">丽江婚纱拍摄之旅</text>
                <text class="english">LIJIANG WEDDING PHOTOGRAPHY</text>
              </view>
              <view class="text-section sub">
                <text class="chinese">遇见最美的风景</text>
                <text class="english">ENCOUNTER THE MOST BEAUTIFUL SCENERY</text>
              </view>
              <view class="text-section desc">
                <text class="chinese">在丽江，每一处风景都是大自然的馈赠，每一帧画面都是时光的见证。雪山、湖泊、古城，在这里，我们不仅记录爱情，更定格永恒。让最美的风景，见证最美的爱情。</text>
                <text class="english">In Lijiang, every landscape is a gift from nature, every frame a witness of time. Snow-capped mountains, lakes, and ancient towns - here we not only capture love but also freeze eternity. Let the most beautiful scenery witness the most beautiful love.</text>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="block-image" @click="navigateToDetail(index)">
              <image 
                :src="item.image" 
                mode="aspectFill" 
                @error="(e) => handleImageError(e, index)"
              />
            </view>
            <view class="block-info">
              <text class="block-title">{{ item.title }}</text>
              <text class="block-desc">{{ item.description }}</text>
            </view>
          </template>
        </view>
      </view>
      <van-back-top  bottom="20vh" />
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import request from '@/utils/request';

const worksList = ref([
  {
    title: "丽江",
    description: "description",
    image: "",
    type: 61 // 横版图片类型
  },
  {
    title: "日照金山",
    description: "The sun dresses peaks in gold,but you outshine them all,two silhouettes gilded by dawn.",
    image: "",
    type: 61 // 竖版图片类型
  },
  {
    title: "蓝月谷",
    description: "The mountain spilled its inkpot blue,and accidentally wrote our forever.",
    image: "",
    type: 71 // 横版图片类型
  },
  {
    title: "姐妹湖",
    description: "The mountain wept twice—one tear for beginnings,one for endless.",
    image: "",
    type: 81 // 横版图片类型
  },
  {
    title: "织梦空间",
    description: "On the loom of light and mist,we weave an eternity,softer than morning fog.",
    image: "",
    type: 91 // 横版图片类型
  }
]);

// 获取图片
const fetchImages = async () => {
  try {
    // 并行获取所有场景的图片
    const imagePromises = worksList.value.map(async (item) => {
      try {
        const res = await request({
          url: `/api/profilepic/GetProfilesAsync?_type=${item.type}`,
          method: 'get'
        });
        
        if (res.status && res.data && res.data.length > 0) {
          // 随机选择一张图片
          const randomIndex = Math.floor(Math.random() * res.data.length);
          let imageUrl = res.data[randomIndex].picUrl;
          
          // 确保图片URL使用正确的协议
          if (imageUrl && !imageUrl.startsWith('http')) {
            imageUrl = `http://${imageUrl}`;
          }
          
          return imageUrl;
        }
        return 'https://img01.yzcdn.cn/vant/apple-1.jpg'; // 默认图片
      } catch (error) {
        console.error(`Failed to fetch image for type ${item.type}:`, error);
        return 'https://img01.yzcdn.cn/vant/apple-1.jpg'; // 默认图片
      }
    });

    // 等待所有图片加载完成
    const images = await Promise.all(imagePromises);
    
    // 更新图片URL
    worksList.value = worksList.value.map((item, index) => ({
      ...item,
      image: images[index]
    }));
  } catch (error) {
    console.error('Failed to fetch images:', error);
    uni.showToast({
      title: '获取图片失败',
      icon: 'error'
    });
  }
};

// 处理图片加载错误
const handleImageError = (e, index) => {
  console.error('Image load error:', e);
  if (e.target) {
    e.target.src = 'https://img01.yzcdn.cn/vant/apple-1.jpg';
  }
};

const navigateToDetail = (index) => {
  if (index === 1) { // 日照金山块
    uni.navigateTo({
      url: '/pages/Works/SunlitPeak'
    });
  } else if (index === 2) { // 蓝月谷块
    uni.navigateTo({
      url: '/pages/Works/BlueMoonValley'
    });
  } else if (index === 3) { // 姐妹湖块
    uni.navigateTo({
      url: '/pages/Works/SisterLakes'
    });
  } else if (index === 4) { // 织梦空间块
    uni.navigateTo({
      url: '/pages/Works/DreamSpace'
    });
  }
};

const getBlockClass = (index) => {
    return {
        'text-block': index === 0
    };
};

onMounted(async () => {
  try {
    uni.showLoading({
      title: '加载中...'
    });
    await fetchImages();
    uni.hideLoading();
  } catch (error) {
    console.error('Failed to initialize:', error);
    uni.hideLoading();
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'error'
    });
  }
});
</script>

<style lang="scss">
page {
  height: 100%;
}

.container {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.scroll-container {
  height: 100%;
  width: 100%;
  padding: 20px 12px;
  box-sizing: border-box;
}

.works-block {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .block-content {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    &.text-block {
      padding: 40px;
      background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    }
  }
  
  .art-text-content {
    .text-section {
      margin-bottom: 30px;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease forwards;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &.main {
        animation-delay: 0.2s;
        
        .chinese {
          font-size: 36px;
          font-weight: bold;
          color: #ffffff;
          display: block;
          margin-bottom: 8px;
          letter-spacing: 4px;
          opacity: 0;
          animation: fadeIn 0.8s ease forwards;
          animation-delay: 0.4s;
        }
        
        .english {
          font-size: 18px;
          color: rgba(255, 255, 255, 0.8);
          display: block;
          letter-spacing: 2px;
          opacity: 0;
          animation: fadeIn 0.8s ease forwards;
          animation-delay: 0.6s;
        }
      }
      
      &.sub {
        animation-delay: 0.4s;
        
        .chinese {
          font-size: 24px;
          color: #ffffff;
          display: block;
          margin-bottom: 4px;
          letter-spacing: 2px;
          opacity: 0;
          animation: fadeIn 0.8s ease forwards;
          animation-delay: 0.6s;
        }
        
        .english {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
          display: block;
          letter-spacing: 1px;
          opacity: 0;
          animation: fadeIn 0.8s ease forwards;
          animation-delay: 0.8s;
        }
      }
      
      &.desc {
        animation-delay: 0.6s;
        
        .chinese {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.9);
          display: block;
          margin-bottom: 16px;
          line-height: 1.6;
          opacity: 0;
          animation: fadeIn 0.8s ease forwards;
          animation-delay: 0.8s;
        }
        
        .english {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
          display: block;
          line-height: 1.6;
          font-style: italic;
          opacity: 0;
          animation: fadeIn 0.8s ease forwards;
          animation-delay: 1s;
        }
      }
    }
  }
  
  .block-image {
    width: 100%;
    height: 160px;
    
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .block-info {
    padding: 15px 12px;
    
    .block-title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 6px;
      display: block;
      font-family: 'NSimSun', '新宋体', serif;
      letter-spacing: 1px;
    }
    
    .block-desc {
      font-size: 14px;
      color: #666666;
      display: block;
      font-family: 'STXingkai', '华文行楷', serif;
      line-height: 1.6;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style> 